﻿<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
  <title>Contact </title>
  <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
  <link rel="stylesheet" type="text/css" href="css/font-awesome.min.css">
  <link rel="stylesheet" type="text/css" href="css/ewen-icons.css">
  <link rel="stylesheet" type="text/css" href="css/animate.min.css">
  <link rel="stylesheet" type="text/css" href="css/cubeportfolio.min.css">
  <link rel="stylesheet" type="text/css" href="css/owl.carousel.css">
  <link rel="stylesheet" type="text/css" href="css/owl.transitions.css">
  <link rel="stylesheet" type="text/css" href="css/settings.css">
  <link rel="stylesheet" type="text/css" href="css/bootsnav.css">
  <link rel="stylesheet" type="text/css" href="css/jquery.fancybox.css">
  <link rel="stylesheet" type="text/css" href="css/style.css">
  <!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
  <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
  <![endif]-->
</head>

<body>

  <!--HEADER STARTS-->
  <header class="transparent">
    <nav class="navbar navbar-default navbar-fixed white no-background bootsnav">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-menu">
            <i class="fa fa-bars"></i>
          </button>
          <a class="navbar-brand" href="index.html">
            <img src="images/logo.png" class="logo logo-display" alt="">
            <img src="images/logo-black.png" class="logo logo-scrolled" alt="">
          </a>
        </div>
        <div class="collapse navbar-collapse" id="navbar-menu">
          <ul class="nav navbar-nav navbar-right" data-in="fadeIn" data-out="fadeOut">
            <li><a href="index.html">Home</a></li>
            <li><a href="about.html">About</a></li>
            <li class="dropdown">
              <a href="javascript:;">Product</a>
              <ul class="dropdown-menu">
                <li><a href="product.html?Radiator">Radiator</a></li>
                <li><a href="product.html?Engine">Engine</a></li>
                <li><a href="product.html?Intercooler">Intercooler</a></li>
                <li><a href="product.html?Others">Others</a></li>
              </ul>
            </li>
            <li class="active"><a href="contact.html">Contact Us</a></li>
            <div id="menu_bars" class="right">
              <span class="t1"></span>
              <span class="t2"></span>
              <span class="t3"></span>
            </div>
          </ul>
        </div>
        <div class="sidebar_menu">
          <nav class="pushmenu pushmenu-right">
            <a class="push-logo" href="index.html"><img src="images/logo-black.png" alt="logo"></a>
            <ul class="push_nav centered">
              <li><a href="index.html">Home</a></li>
              <li><a href="about.html">About</a></li>
              <li><a href="product.html">Product</a></li>
              <li><a href="contact.html">Contact Us</a></li>
            </ul>
            <div class="clearfix"></div>
            <ul class="social bottom20 top20">
              <li><a href="#"><i class="fa fa-whatsapp"></i></a></li>
              <li><a href="#"><i class="fa fa-skype"></i></a></li>
              <li><a href="#"><i class="fa fa-facebook"></i></a></li>
              <li><a href="#"><i class="fa fa-twitter"></i></a></li>
            </ul>
          </nav>
        </div>
      </div>
    </nav>
  </header>
  <!--HEADER Ends-->

  <!-- Page Header -->
  <section class="padding page_header page_header_two">
    <div class="container">
      <div class="row">
        <div class="col-sm-12 text-center">
          <h1 class="text-capitalize top40">Contact Us</h1>
          <p class="bottom30">Look forward to hear from you!</p>
          <ul class="breadcrumb_link">
            <li><a href="index.html">Home</a></li>
            <li class="active">Contact Us</li>
          </ul>
        </div>
      </div>
    </div>
  </section>
  <!-- Page Header ends -->

  <!-- Contact US -->
  <section id="contact-us" class="padding">
    <div class="container">
      <div class="row">
        <div class="col-sm-12 margin_bottom">
          <div id="map_wrapper">
            <div id="map_canvas"></div>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-md-6 col-sm-6 wow fadeInLeft row" data-wow-delay="500ms">
          <div class="col-sm-12">
            <h2>LENDA</h2>
            <h5 class="top10">International Trading Co.,Ltd</h5>
          </div>
          <div class="col-sm-6 address top40 wow fadeIn" data-wow-delay="300ms">
            <h4 class="bottom20">Mr. Clinton Eddy</h4>
            <div class="locations">
              <span><i class="fa fa-phone"></i></span>
              <p><span>(+86)152 2201 0177</span></p>
            </div>
            <div class="locations">
              <span><i class="fa fa-whatsapp"></i></span>
              <p><span>(+86)152 2201 0177</span></p>
            </div>
            <div class="locations">
              <span><i class="fa fa-envelope-o"></i></span>
              <p><a href="#.">eddy@tjlenda.com</a></p>
            </div>
            <div class="locations">
              <span><i class="fa fa-map-marker"></i></span>
              <p>Airport Economic Zone, Tianjin.</p>
            </div>
          </div>
        </div>
        <div class="col-md-6 col-sm-6 bottom80 wow fadeInRight" data-wow-delay="600ms">
          <h2>Get in Touch</h2>
          <p class="top10 bottom30">We love feedback. Fill out the form below and we'll get back to you as soon as possible!</p>
          <form action="javascript:;" id="form" class="callus">
            <div class="row">
              <div class="col-sm-6">
                <div class="form-group">
                  <input type="text" class="form-control" name="name" placeholder="Your Name" oninvalid="setCustomValidity('please enter your name')" oninput="setCustomValidity('')" required>
                </div>
              </div>
              <div class="col-sm-6">
                <div class="form-group">
                  <input type="email" class="form-control" name="email" placeholder="Email Address" oninvalid="setCustomValidity('please enter a correct email')" oninput="setCustomValidity('')" required>
                </div>
              </div>
              <div class="col-sm-12">
                <div class="form-group">
                  <textarea class="form-control" id="message" name="message" placeholder="Your Message" oninvalid="setCustomValidity('please enter message')" oninput="setCustomValidity('')" required></textarea>
                </div>
                <label class="tip" style="color:red"></label>
                <button type="submit" id="submit" class="btn_border btn_default active pull-right">send message</button>
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>
  </section>
  <!--Contact US Ends-->

  <!--FOOTER-->
  <footer class="dark">
    <div class="container">
      <div class="row">
        <div class="col-sm-6 col-md-4 foot_panel">
          <a href="index.html" class="footer_logo"><img src="images/logo.png" alt="logo" class="bottom25"></a>
          <p class="bottom30">Keep away from people who try to belittle your<br> ambitions Small people always do that but the really
            great Friendly. Keep away from people who try to belittle your ambitions.
          </p>
          <div class="locations bottom30">
            <span><i class="icon-phone2"></i></span>
            <p><span>+(86) 152-2201-0177</span> <a href="#.">eddy@tjlenda.com</a></p>
          </div>
          <ul class="social white">
            <li><a href="#"><i class="fa fa-whatsapp"></i></a></li>
            <li><a href="#"><i class="fa fa-skype"></i></a></li>
            <li><a href="#"><i class="fa fa-facebook"></i></a></li>
            <li><a href="#"><i class="fa fa-twitter"></i></a></li>
          </ul>
        </div>
        <div class="col-sm-6 col-md-1 foot_panel">

        </div>
        <div class="col-sm-6 col-md-4 foot_panel">
          <h3 class="bottom30">Our Services</h3>
          <ul class="links">
            <li><a href="index.html"><i class="icon-play3"></i>Home</a></li>
            <li><a href="about.html"><i class="icon-play3"></i>About Us</a></li>
            <li><a href="product.html"><i class="icon-play3"></i>Product</a></li>
            <li><a href="contact.html"><i class="icon-play3"></i>Contact Us</a></li>
          </ul>
        </div>
        <div class="col-sm-6 col-md-3 foot_panel">
          <h3 class="bottom30">Business hours</h3>
          <p class="bottom20">Our support available to help you 24
            hours a day, seven days week
          </p>
          <ul class="hours_wigdet white">
            <li>Monday-Friday: <span>08.00-18.00</span></li>
            <li>Saturday:<span>09:00-21:00</span></li>
            <li>Sunday: <span>09:00-20:00</span></li>
            <li>Calendar Events: <span>24-Hour Shift</span></li>
          </ul>
        </div>
      </div>
    </div>
  </footer>
  <!--FOOTER ends-->

  <!--copyright-->
  <div class="copyright dark">
    <div class="container">
      <div class="row">
        <div class="col-sm-12 text-center">
          <p>Copyright &copy; 2017. <strong>LENDA</strong> <span>International Trading Co.,Ltd, All Rights Reserved</p>
        </div>
      </div>
    </div>
  </div>
  <!--copyright ends-->

  <script src="js/jquery-2.2.3.js"></script>
  <script src="http://maps.google.cn/maps/api/js?key=AIzaSyAOBKD6V47-g_3opmidcmFapb3kSNAR70U&language=en-gb" type="text/javascript"></script>
  <script src="js/map.js"></script>
  <script src="js/bootstrap.min.js"></script>
  <script src="js/jquery.parallax-1.1.3.js"></script>
  <script src="js/jquery.appear.js"></script>
  <script src="js/bootsnav.js"></script>
  <script src="js/jquery.cubeportfolio.min.js"></script>
  <script src="js/owl.carousel.min.js"></script>
  <script src="js/jquery.countTo.js"></script>
  <script src="js/jquery.fancybox.js"></script>
  <script src="js/jquery.fancybox-media.js"></script>
  <script src="js/jquery.themepunch.tools.min.js"></script>
  <script src="js/jquery.themepunch.revolution.min.js"></script>
  <script src="js/jquery.themepunch.revolution.min.js"></script>
  <script src="js/revolution.extension.actions.min.js"></script>
  <script src="js/revolution.extension.layeranimation.min.js"></script>
  <script src="js/revolution.extension.navigation.min.js"></script>
  <script src="js/revolution.extension.parallax.min.js"></script>
  <script src="js/revolution.extension.slideanims.min.js"></script>
  <script src="js/revolution.extension.kenburn.min.js"></script>
  <script src="js/revolution.extension.video.min.js"></script>
  <script src="js/wow.min.js"></script>
  <script src="js/axios.min.js"></script>
  <script src="js/counter.js"></script>
  <script src="js/functions.js"></script>
  <script type="text/javascript">
  $(function () {
    $("#submit").click(function() {

      if($("input[name='name']").val()=="" || $("input[name='email']").val()=="" || $("#message").val() == "") {
        $(".tip").html("Please fill in all blanks");
      }else {
        axios.post('mail/', $("#form").serialize()).then((res) => {
          if(res.data.status == 1) {
            $(".tip").html("Successful! We will contact you soon!");
          }else {
            $(".tip").html("can't send this message! Please try again.");
          }
        }).catch((err) => {
          // alert("can't send this message! Please try again.");
        });
      }

    })
  })
  </script>

</body>
</html>
